<template>
	<view class="vip-view">
		<view class="position-absolute top-0">
			<u-navbar :background="background" back-icon-color="#fff" :border-bottom="false">
			</u-navbar>
		</view>
		<view class="vip-img">
			<image src="/static/images/index/t_1.png" mode="widthFix"></image>
		</view>
		<view class="w-100 px-32 vip_content_po">
			<view class="vip-user w-100 position-relative u-m-b-32">
				<image src="/static/images/index/t_2.png" class="w-100 h-100" mode=""></image>
				<view class="position-absolute top-0 left-0 w-100 h-100 u-p-l-28 row">
					<u-avatar :src="avatar ? avatar : require('@/static/images/index/t_head.png')"></u-avatar>
					<view class="u-m-l-10">
						<view style="font-weight: bold;font-size: 30rpx;color: #140402;">{{userName}}</view>
						<view style="font-weight: 500;font-size: 24rpx;color: #140402;padding-top: 22rpx;">购买推广套餐享高曝光率
						</view>
					</view>
				</view>
			</view>
			<!-- 公告 -->
			<!-- v-if="TabCur == 0" -->
			<view class="gg flex align-center justify-center" v-if="noticeList.length>0" style="margin-bottom: 10px;">
				<view class="gg-box flex align-center justify-between">
					<image src="/static/images/index/t_3.png" mode=""></image>
					<swiper :autoplay="true" :vertical="true" :interval="4000" :circular="true" :indicator-dots="false"
						class="gg-box-swiper">
						<block v-for="(item, index) in noticeList">
							<swiper-item @tap='goMsg(item.url)'>
								<view class="gg-box-swiper-t">{{item.title}}</view>
							</swiper-item>
						</block>
					</swiper>
				</view>
			</view>
			<!-- <view class="row u-m-b-32">
				<image src="../static/vip/6.png" class="vip-logo" mode=""></image>
				<view class="font-weight-550 u-f-36 u-m-l-2">推广套餐</view>
			</view> -->

			<view class="taocan_box_title">
				<image src='/static/images/index/t_l_1.png'></image>
				<text>推广套餐</text>
				<image src='/static/images/index/t_l_2.png'></image>
			</view>

			<view class="tg_taocan_box">
				<view class="item" v-for="(item, index) in VIPlist" :key="item.id"
					:class="vipId==item.id ? 'active_item' :''" @click="vipClick(item.id,index)">
					<view class="">{{item.name}}</view>
					<view>¥<text>{{item.money}}</text></view>
					<view>推广次数：{{item.bgnum}}次</view>
				</view>
			</view>

			<view style="padding: 20rpx;font-weight: bold;font-size: 24rpx;color: #fff;"
				v-if='vipId && VIPlist[vipIndex].context!=null'>
				{{VIPlist[vipIndex].context}}
			</view>
			<!-- <view style="padding-bottom: 20rpx;" v-if='vipId && VIPlist[vipIndex].poster !=null'>
				<image :src="VIPlist[vipIndex].poster" style="width: 100%;"></image>
			</view> -->

			<view class="bottom-area">
				<view class="agreement-area">
					<image src='/static/images/index/t_select.png' @click="checked=!checked" v-if='checked'></image>
					<image src='/static/images/index/t_select_1.png' @click="checked=!checked" v-else></image>
					<view class="agreement-text">
						<text>我已阅读并同意</text>
						<text @click="goXieyi" style="text-decoration: underline;">《付费须知说明》</text>
					</view>
				</view>
				<button class="confirm_pay_btn" @tap="bugVIP">立即购买</button>
			</view>
		</view>
		<u-popup v-model="showPay" mode="bottom" border-radius="14" :closeable="true">
			<view
				style="width: 100%;text-align: center;font-size:38rpx;font-weight: bold;margin-top:15rpx;margin-bottom: 80rpx;">
				选择支付方式
			</view>
			<view @click="goMoney" class="flex align-center justify-end" style="margin-right: 20rpx;color: #8B8FF0;">
				<view class="" style="color: #666666;">
					金豆不足？
				</view>
				去充值
			</view>
			<view style="display: flex;height: 100upx;align-items: center;padding: 20upx 30rpx;"
				v-for="(item,index) in openLists" :key='index' @tap='selectWay(item.id)'>
				<view style="display: flex;width:80%;align-items: center;">
					<image :src="item.image" style="width: 55upx;height: 55upx;"></image>
					<view style="font-size: 30upx;margin-left: 20upx;width: 70%;">{{item.text}}
					</view>
				</view>
				<view style="width: 20%;display: flex;justify-content: flex-end;">
					<radio-group name="openWay" style="margin-left: 20upx;">
						<label class="tui-radio">
							<radio color="#8B8FF0" style="transform:scale(0.7)"
								:checked="openWay === item.id ? true : false" />
						</label>
					</radio-group>
				</view>
			</view>
			<view
				style="width: 690rpx;height: 80rpx;background:#8B8FF0;color:#FFFFFF;text-align: center;line-height: 80rpx;border-radius: 50rpx;margin: 30rpx;"
				@tap="pay()">确认支付</view>
		</u-popup>
		<u-toast ref="uToast" />
		<!-- 抖音im客服 -->
		<ttMsg />
	</view>
</template>

<script>
	import ttMsg from '@/components/ttMsg/ttMsg.vue'
	export default {
		components: {
			ttMsg
		},
		data() {
			return {
				userName: '匿名',
				VIPlist: [],
				showPay: false,
				openWay: 0,
				openLists: [],
				vipId: '',
				vipData: '',
				isVIP: false,
				showjl: false,
				checked: false,
				background: {
					backgroundColor: 'transparent'
				},
				avatar: "",
				vipIndex: null,
				noticeList: []
			}
		},
		onLoad() {
			// #ifdef APP
			if (plus.os.name.toLowerCase() === 'android') {

				this.openLists = [{
					image: '/static/images/pay/zhifubao.png',
					text: '支付宝',
					id: 2
				}, {
					image: '/static/images/pay/weixin.png',
					text: '微信',
					id: 1
				}, {
					image: '/static/images/pay/lingqian.png',
					text: '金豆支付',
					id: 3
				}]
				this.openWay = 2;
			} else {
				let checkIosPay = this.$queue.getData('checkIosPay');
				if (checkIosPay === '是') {
					this.openLists = [{
						image: '/static/images/pay/lingqian.png',
						text: '金豆支付',
						id: 3
					}];
					this.openWay = 3;
				} else {
					this.openLists = [{
						image: '/static/images/pay/zhifubao.png',
						text: '支付宝',
						id: 2
					}, {
						image: '/static/images/pay/lingqian.png',
						text: '金豆支付',
						id: 3
					}];
					this.openWay = 1;
				}
			}

			// #endif 

			// #ifdef MP-WEIXIN
			this.openLists = [{
						image: '/static/images/pay/weixin.png',
						text: '微信',
						id: 1
					},
					{
						image: '/static/images/pay/zhifubao.png',
						text: '支付宝',
						id: 2
					},
					{
						image: '/static/images/pay/lingqian.png',
						text: '金豆支付',
						id: 3
					}
				],
				this.openWay = 3;
			// #endif

			// #ifdef H5
			let ua = navigator.userAgent.toLowerCase();
			if (ua.indexOf('micromessenger') !== -1) {
				this.openLists = [{
							image: '/static/images/pay/weixin.png',
							text: '微信',
							id: 1
						},
						{
							image: '/static/images/pay/zhifubao.png',
							text: '支付宝',
							id: 2
						},
						{
							image: '/static/images/pay/lingqian.png',
							text: '金豆支付',
							id: 3
						}
					],
					this.openWay = 1;
			} else {
				this.openLists = [{
						image: '/static/images/pay/zhifubao.png',
						text: '支付宝',
						id: 2
					}, {
						image: '/static/images/pay/lingqian.png',
						text: '金豆支付',
						id: 3
					}],
					this.openWay = 2;
			}

			// //#endif
			// // #ifdef MP-TOUTIAO
			// this.openLists = [{
			// 	image: '/static/images/pay/zhifubao.png',
			// 	text: '抖音支付',
			// 	id: 4
			// }, {
			// 	image: '/static/images/pay/lingqian.png',
			// 	text: '金豆支付',
			// 	id: 3
			// }]
			// this.openWay = 4;
			// // #endif
			// // #ifdef MP-KUAISHOU
			// const osName = uni.getSystemInfoSync().osName;
			// if (osName != 'ios') { //安卓
			// 	this.openLists = [{
			// 		image: '/static/images/pay/zhifubao.png',
			// 		text: '快手支付',
			// 		id: 5
			// 	}, {
			// 		image: '/static/images/pay/lingqian.png',
			// 		text: '金豆支付',
			// 		id: 3
			// 	}]
			// 	this.openWay = 5
			// } else {
			// 	this.openLists = [{
			// 		image: '/static/images/pay/lingqian.png',
			// 		text: '金豆支付',
			// 		id: 3
			// 	}]
			// 	this.openWay = 3
			// }
			// //#endif
			if (uni.getStorageSync('token')) {
				this.$Request.get('/app/common/type/813').then(res => {
					if (res.code == 0 && res.data.value) {
						if (res.data.value == '是') {
							this.getActivity()
						}
					}
				})
			}

			this.userName = uni.getStorageSync('userName')
			this.avatar = uni.getStorageSync('avatar')
			this.getVIPDet()
			this.getvipdata()
		},
		onShow() {
			this.getMsg()
		},
		methods: {
			// 公告
			getMsg() {
				let data = {
					page: 1,
					limit: 100,
					state: 102
				}
				this.$u.api.msg(data).then(res => {
					if (res.code == 0) {
						this.notice = res.data.list
						res.data.list.forEach(res => {
							this.noticeList.push(res)
						})
					} else {
						uni.showToast({
							title: res.msg,
							duration: 1000,
							icon: 'none'
						});
					}
				})
			},
			vipClick(id, index) {
				this.vipId = id
				this.vipIndex = index
			},
			//去付费须知说明
			goXieyi() {
				uni.navigateTo({
					url: '/me/setting/payXieYi'
				})
			},
			goMoney() {
				uni.navigateTo({
					url: '/me/wallet/wallet'
				})
			},
			// 获取活动等级
			getActivity() {
				this.$Request.getT('/app/invite/selectInviteAwardByUserId').then(res => {
					if (res.code == 0) {
						if (res.data) {
							this.showjl = true
						}
					}
				})
			},
			//去助力页面
			goZl() {
				uni.navigateTo({
					url: '/me/assistance/assistance'
				})
				this.showjl = false
			},
			getvipdata() {
				let data = {
					userId: uni.getStorageSync('userId')
				}
				this.$u.api.userVip(data).then(res => {
					if (res.code == 0 && res.data && res.data.isVip == 2) {
						this.isVIP = true;
						this.vipData = res.data.endTime
					} else {
						this.isVIP = false

					}
				})
			},
			selectWay: function(id) {
				this.openWay = id;
			},
			getVIPDet() {
				// selectSpreadList
				this.$u.get("/app/user/selectSpreadList").then(
					res => {
						if (res.code === 0) {
							this.VIPlist = res.data
						} else {
							uni.showToast({
								title: res.msg,
								duration: 1000,
								icon: 'none'
							});
						}
					});

			},
			bugVIP() {
				if (this.checked == false) {
					this.$refs.uToast.show({
						title: '请阅读并同意《付费须知说明》',
						duration: 1500
					})
					return
				}
				if (this.vipId == '') {
					this.$refs.uToast.show({
						title: '请先选择套餐',
						duration: 1500
					})
					return
				}
				this.showPay = true
			},
			//头条支付
			toutiaoPay() {
				let that = this
				let data = {
					vipDetailsId: this.vipId
				}
				uni.showLoading({
					title: '支付中...'
				})
				this.$Request.getT('/app/order/insertSpreadOrders', data).then(res => {
					if (res.code == 0) {
						this.$Request.postT('/app/dyPay/payVirtualAppOrder', {
							orderId: res.data.ordersId
						}).then(ret => {
							if (ret.code == 0) {
								// console.log(JSON.parse(ret.data))
								let options = {
									data: JSON.stringify(ret.data.data),
									byteAuthorization: JSON.stringify(ret.data.byteAuthorization)
								}
								tt.requestOrder({
									data: JSON.stringify(ret.data.data), // 请勿在前端对data做任何处理
									byteAuthorization: ret.data
										.byteAuthorization, // 请勿在前端对byteAuthorization做任何处理
									success(redd) {
										console.log(JSON.stringify(redd))
										tt.getOrderPayment({
											orderId: redd.orderId,
											success(reee) {
												uni.hideLoading()
												uni.showToast({
													title: '支付成功',
												})
												setTimeout(d => {
													let data = {
														userId: uni
															.getStorageSync(
																'userId')
													}
													that.$u.api.userVip(data).then(
														res => {
															if (res.code ==
																0 && res
																.data && res
																.data
																.isVip ==
																2) {
																uni.setStorageSync(
																	'isVIP',
																	true)
															} else {
																uni.setStorageSync(
																	'isVIP',
																	false)
															}
														})
													setTimeout(d => {
														let data = {
															flag: true
														}
														uni.$emit('back',
															data)
														uni.navigateBack(1)
													}, 1000);
												}, 2000)
											},
											fail(ee) {
												uni.hideLoading()
												uni.showToast({
													title: '支付失败，请重试',
													icon: 'none'
												})
												console.log(ee)
											}
										});

									},
									fail(e) {
										uni.hideLoading()
										uni.showToast({
											title: '支付失败，请重试',
											icon: 'none'
										})
										console.log(e)
									}
								});
							} else {
								uni.hideLoading()
								uni.showToast({
									title: res.msg,
									icon: 'none'
								})
							}
						})
					} else {
						uni.hideLoading()
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			},
			pay() {
				console.log(this.openWay)
				let that = this
				// if (that.openWay == 4) { //抖音支付
				// 	that.toutiaoPay()
				// } else if (that.openWay == 5) { //快手支付
				// 	uni.showLoading({
				// 		title: '支付中...'
				// 	})
				// 	let data = {
				// 		vipDetailsId: that.vipId
				// 	}
				// 	this.$Request.getT('/app/order/insertSpreadOrders?vipDetailsId=2', data).then(res => {
				// 		if (res.code == 0) {
				// 			this.$Request.postT('/app/ksPay/payAppOrder', {
				// 				orderId: res.data.ordersId
				// 			}).then(ree => {
				// 				if (ree.code == 0) {
				// 					ks.pay({
				// 						serviceId: '1', //服务类型id（固定值为‘1’）
				// 						orderInfo: ree.data,
				// 						success(succ) {
				// 							uni.hideLoading()
				// 							uni.showToast({
				// 								title: '支付成功'
				// 							})
				// 							let data = {
				// 								userId: uni.getStorageSync('userId')
				// 							}
				// 							that.$u.api.userVip(data).then(res => {
				// 								if (res.code == 0 && res.data && res.data
				// 									.isVip ==
				// 									2) {
				// 									uni.setStorageSync('isVIP', true)
				// 								} else {
				// 									uni.setStorageSync('isVIP', false)
				// 								}
				// 							})
				// 							setTimeout(d => {
				// 								let data = {
				// 									flag: true
				// 								}
				// 								uni.$emit('back', data)
				// 								uni.navigateBack(1)
				// 							}, 1000);
				// 						},
				// 						fail(err) {
				// 							uni.hideLoading()
				// 							that.$refs.uToast.show({
				// 								title: '支付失败，请重试!',
				// 								duration: 1500
				// 							})
				// 						},
				// 					})
				// 				} else {
				// 					uni.hideLoading()
				// 					this.$refs.uToast.show({
				// 						title: ree.msg,
				// 						duration: 1500
				// 					})
				// 				}
				// 			})
				// 		} else {
				// 			uni.hideLoading()
				// 			this.$refs.uToast.show({
				// 				title: res.msg,
				// 				duration: 1500
				// 			})
				// 		}
				// 	})

				// } else {

				let data = {
					vipDetailsId: that.vipId
				}
				let userId = uni.getStorageSync('userId')
				that.$u.api.insertSpreadOrders(data).then(res => {
					if (res.code == 0) {
						console.log('----------')
						console.log('>>>>>>>>>>>'+ that.openWay)
						if (that.openWay == 1) {
							// #ifdef MP-WEIXIN
							that.$u.post('app/wxPay/wxPayJsApiOrder?orderId=' + res.data.ordersId).then(
								ret => {
									uni.requestPayment({
										provider: 'wxpay',
										timeStamp: ret.data.timestamp,
										nonceStr: ret.data.noncestr,
										package: ret.data.package,
										signType: ret.data.signType,
										paySign: ret.data.sign,
										success: function(suc) {
											console.log('success:' + JSON.stringify(suc));
											that.showPay = false
											uni.showToast({
												title: '支付成功',
												icon: 'success'
											})

											let data = {
												userId: uni.getStorageSync('userId')
											}
											that.$u.api.userVip(data).then(res => {
												if (res.code == 0 && res.data && res
													.data
													.isVip ==
													2) {
													uni.setStorageSync('isVIP', true)
												} else {
													uni.setStorageSync('isVIP', false)
												}
											})
											setTimeout(d => {
												let data = {
													flag: true
												}
												uni.$emit('back', data)
												uni.navigateBack(1)
											}, 1000);
										},
										fail: function(err) {
											console.log('fail:' + JSON.stringify(err));
											uni.showToast({
												title: '支付失败',
												icon: 'none'
											})
										}
									});
								});
							// #endif
							// #ifdef H5
							// let ua = navigator.userAgent.toLowerCase();
							// console.log('H5:'+ua.indexOf('micromessenger'))
							// if (ua.indexOf('micromessenger') !== -1) {
							// 	this.$u.post('/app/MiHuaPay/pay?orderId=' + res.data.ordersId +
							// 		'&classify=1&payType=H5_WEIXIN').then(red => {
							// 		if (red.code === 0) {
							// 			/* this.callPay(red.data); */
							// 			window.location.href = red.data
							// 		} else {
							// 			uni.showToast({
							// 				icon: 'none',
							// 				title: '支付失败!'
							// 			});
							// 		}

							// 	});
							// }
							// #endif
							// #ifdef APP
							this.$u.post("/app/wxPay/payAppOrder?orderId=" + res.data.ordersId).then(red => {
								if (red.code == 0) {
									that.setPayment('wxpay', JSON.stringify(red.data));
								} else {
									uni.showToast({
										title: red.msg,
										icon: 'none'
									})
								}
							});
							// #endif
						} else if (that.openWay == 2) {
							// 支付宝
							// #ifdef H5
							this.$u.post('/app/aliPay/payOrderSp?orderId=' + res.data.ordersId +
								'&classify=2&payType=ALIPAY_H5').then(
								red => {
									if (red.code === 0) {
										const div = document.createElement('div')
										div.innerHTML = red.data //此处form就是后台返回接收到的数据
										document.body.appendChild(div)
										document.forms[0].submit()
									} else {
										uni.showToast({
											icon: 'none',
											title: '支付失败!'
										});
									}
								});
							// #endif
							console.log('-----payOrderSp2-----')
							// #ifdef APP
							this.$u.post('/app/aliPay/payOrderSp?orderId=' + res.data.ordersId +
								'&classify=1&payType=ALIPAY_APP').then(
								red => {
									console.log('-----payOrderSp2---res--'+JSON.stringify(res))
									if (red.code === 0) {
										that.setPayment('alipay', red.data);
									} else {
										uni.showToast({
											icon: 'none',
											title: '支付失败!'
										});
									}
								});
							// #endif
						} else if (that.openWay == 3) {
							// 余额
							that.$queue.showLoading('支付中...')
							that.$Request.postT("/app/order/payOrders", {
								orderId: res.data.ordersId,
							}).then(red => {
								uni.hideLoading();
								if (red.code == 0) {
									that.showPay = false
									uni.showToast({
										title: '支付成功',
										icon: 'success'
									})

									let data = {
										userId: uni.getStorageSync('userId')
									}
									that.$u.api.userVip(data).then(res => {
										if (res.code == 0 && res.data && res.data
											.isVip ==
											2) {
											uni.setStorageSync('isVIP', true)
										} else {
											uni.setStorageSync('isVIP', false)
										}
									})
									setTimeout(d => {
										let data = {
											flag: true
										}
										uni.$emit('back', data)
										uni.navigateBack(1)
									}, 1000);
								} else {
									that.$queue.showToast(red.msg)
								}
							});
						}

					} else {
						uni.showToast({
							title: res.msg,
							icon: "none"
						})
					}
				})
				// }

			},
			isCheckPay(code, name, order) {
				if (code == 0) {
					console.log('999999999999')
					this.setPayment(name, order);
				} else {
					uni.hideLoading();
					uni.showToast({
						title: '支付信息有误'
					});
				}
			},
			setPayment(name, order) {
				console.log('-----setPayment--'+JSON.stringify(order))
				console.log('-----setPayment2--'+JSON.stringify(order.pay_info))
				let that = this
				uni.requestPayment({
					provider: name,
					orderInfo: order, //微信、支付宝订单数据
					success: function(res) {
						uni.hideLoading();
						that.showPay = false
						uni.showToast({
							title: '支付成功',
							icon: 'success'
						})

						let data = {
							userId: uni.getStorageSync('userId')
						}
						that.$u.api.userVip(data).then(res => {
							if (res.code == 0 && res.data && res.data
								.isVip ==
								2) {
								uni.setStorageSync('isVIP', true)
							} else {
								uni.setStorageSync('isVIP', false)
							}
						})
						setTimeout(d => {
							let data = {
								flag: true
							}
							uni.$emit('back', data)
							uni.navigateBack(1)
						}, 1000);
					},
					fail: function(err) {
						uni.hideLoading();
					},
					complete() {
						uni.hideLoading();
					}
				});
			},
			callPay: function(response) {
				if (typeof WeixinJSBridge === "undefined") {
					if (document.addEventListener) {
						document.addEventListener('WeixinJSBridgeReady', this.onBridgeReady(response), false);
					} else if (document.attachEvent) {
						document.attachEvent('WeixinJSBridgeReady', this.onBridgeReady(response));
						document.attachEvent('onWeixinJSBridgeReady', this.onBridgeReady(response));
					}
				} else {
					this.onBridgeReady(response);
				}
			},
			onBridgeReady: function(response) {
				let that = this;
				if (!response.package) {
					return;
				}
				console.log("response)))):" + JSON.stringify(response))
				WeixinJSBridge.invoke(
					'getBrandWCPayRequest', {
						"appId": response.appid, //公众号名称，由商户传入
						"timeStamp": response.timestamp, //时间戳，自1970年以来的秒数
						"nonceStr": response.noncestr, //随机串
						"package": response.package,
						"signType": response.signType, //微信签名方式：
						"paySign": response.sign //微信签名
					},
					function(res) {
						if (res.err_msg === "get_brand_wcpay_request:ok") {
							// 使用以上方式判断前端返回,微信团队郑重提示：
							//res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
							that.showPay = false
							uni.showToast({
								title: '支付成功',
								icon: 'success'
							})

							let data = {
								userId: uni.getStorageSync('userId')
							}
							that.$u.api.userVip(data).then(res => {
								if (res.code == 0 && res.data && res.data
									.isVip ==
									2) {
									uni.setStorageSync('isVIP', true)
								} else {
									uni.setStorageSync('isVIP', false)
								}
							})
							setTimeout(d => {
								let data = {
									flag: true
								}
								uni.$emit('back', data)
								uni.navigateBack(1)
							}, 1000);
						} else {
							uni.hideLoading();
						}
						WeixinJSBridge.log(response.err_msg);
					}
				);
			},

		}
	}
</script>

<style>

</style>
<style lang="scss" scoped>
	page {
		background-color: RGBA(21, 4, 2, 1);
	}

	.confirm_pay_btn {
		width: 690rpx;
		height: 90rpx;
		background: linear-gradient(180deg, #FDEABC, #FED9A1);
		border-radius: 45rpx;
		font-weight: bold;
		font-size: 30rpx;
		color: #000000;
		line-height: 90rpx;
		margin: 0 auto;
		position: relative;
		z-index: 2;
	}


	.taocan_box_title {
		display: flex;
		align-items: center;
		padding: 42rpx;
		justify-content: center;

		image {
			width: 98rpx;
			height: 2rpx;
		}

		text {
			font-weight: bold;
			font-size: 30rpx;
			color: #C4A573;
			padding: 0 16rpx;
		}
	}

	.tg_taocan_box {
		display: flex;
		flex-wrap: wrap;
		gap: 20rpx;
		padding: 0 10rpx;
		// margin-bottom: 60rpx;


		.item {
			position: relative;
			width: calc((100% - 40rpx) / 3);
			height: 260rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			overflow: hidden;
			transition: all 0.3s ease;
			box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);

			view {
				&:nth-child(1) {
					font-weight: bold;
					font-size: 28rpx;
					color: #000000;
					padding-top: 32rpx;
					text-align: center;
					line-height: 1.4;
				}

				&:nth-child(2) {
					font-weight: bold;
					font-size: 26rpx;
					color: #74431F;
					padding-top: 30rpx;
					text-align: center;

					text {
						font-weight: 500;
						font-size: 48rpx;
						color: #74431F;
					}
				}

				&:nth-child(3) {
					width: 100%;
					height: 52rpx;
					background: #F2EBD8;
					font-weight: bold;
					font-size: 20rpx;
					color: #74431F;
					text-align: center;
					line-height: 52rpx;
					position: absolute;
					left: 0;
					bottom: 0;
				}
			}
		}

		.active_item {
			border: 4rpx solid #F93D20;
			background: rgba(255, 227, 180, 1);
			transform: translateY(-4rpx);
			box-shadow: 0 8rpx 16rpx rgba(249, 61, 32, 0.2);

			view {
				&:nth-child(1) {
					color: rgba(116, 67, 31, 1);
				}

				&:nth-child(2) {
					color: rgba(116, 67, 31, 1);
				}

				&:nth-child(3) {
					background: rgba(249, 61, 32, 1);
					color: rgba(255, 255, 255, 1);
				}
			}
		}
	}

	.vip_content_po {
		position: relative;
		z-index: 2;
		padding: 305rpx 30rpx 200rpx 30rpx;
	}

	.vip-img {
		position: absolute;
		left: 0;
		top: 0;

		image {
			width: 750rpx;
		}
	}


	.gg {
		width: 100%;
		height: auto;
		margin-top: 20rpx;

		.gg-box {
			width: 690rpx;
			height: 50rpx;
			background: linear-gradient(90deg, rgba(223, 188, 127, 0.14), rgba(200, 168, 117, 0.14), rgba(189, 158, 110, 0.14));
			border-radius: 25rpx;
			padding: 0 20rpx;

			image {
				width: 36rpx;
				height: 36rpx;
			}
		}

		.gg-box-swiper {
			width: calc(100% - 56rpx);
			height: 100%;
		}

		.gg-box-swiper-t {
			width: 100%;
			height: 100%;
			color: #fff;
			line-height: 50rpx;
			font-size: 24rpx;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}
	}

	.vip-view {
		width: 100vw;
		min-height: 100vh;
		background-color: RGBA(21, 4, 2, 1);
		position: relative;

		.radio-cire {
			width: 32rpx;
			height: 32rpx;
			border-radius: 50%;
			border: 1px solid #999999;
			transition-property: color, border-color, background-color;
			transition-duration: 0.2s;
			margin-right: 8rpx;
		}

		.active-radio {
			border-color: #8B8FF0;
			background-color: #8B8FF0;
		}



		.vip-user {
			height: 158rpx;
			color: #ECE2D1;
		}

		.vip-logo {
			width: 56rpx;
			height: 40rpx;
		}

		.vip-item {
			width: 220rpx;
			height: 282rpx;
			background: #F4F5F9;
			border: 2rpx solid #F4F5F9;
			transition: all .3s;

			.item-title {
				font-family: Tensentype MaiHeiJ, Tensentype MaiHeiJ;
				color: #845914;
			}

			.item-img {
				width: 46rpx;
				height: 42rpx;
				margin-right: 8rpx;
			}
		}

		.active-item {
			background: linear-gradient(180deg, #FEFEFE 0%, #FEF5EB 100%);
			border-color: #BF822D;
		}

		.zf-btn {
			box-shadow: 0rpx 6rpx 12rpx 2rpx rgba(0, 0, 0, 0.16);
			height: 80rpx;
		}

		.bottom-area {
			position: fixed;
			left: 0;
			bottom: 0;
			width: 100%;
			padding: 30rpx 0;
			background-color: RGBA(21, 4, 2, 1);
			z-index: 1;
			padding-bottom: calc(30rpx + env(safe-area-inset-bottom));

			.agreement-area {
				display: flex;
				align-items: center;
				justify-content: center;
				margin-bottom: 30rpx;
				padding: 0 30rpx;

				image {
					width: 24rpx;
					height: 24rpx;
				}

				.agreement-text {
					padding-left: 8rpx;
					font-weight: bold;
					font-size: 20rpx;
					color: #fff;
				}
			}
		}
	}
</style>